<template>
  <div class="pc home">
    <div class="box1">
      <div class="banner">
        <img src="@/assets/pc/page3banner.png" alt="" />
      </div>
      <div class="desBox">
        <div class="desr">
          <div class="dest">Big News That You Want To Highlight - Key Selling Points</div>
          <div class="des_des">Publish time</div>
        </div>
      </div>
    </div>
    <div class="box2">
      <div
        class="box3"
        v-for="(item, index) in mockDetailData"
        @click="goToUrl(`/blogs-detail?id=${item.id}`)"
        :key="index"
      >
        <div class="banner">
          <img v-if="index == 0" src="@/assets/png/blog-1.png" alt="" />
          <img v-if="index == 1" src="@/assets/png/blog-2.png" alt="" />
          <img v-if="index == 2" src="@/assets/png/blog-3.png" alt="" />
          <img v-if="index == 3" src="@/assets/png/blog-4.png" alt="" />
          <img v-if="index == 4" src="@/assets/png/blog-5.png" alt="" />
          <img v-if="index == 5" src="@/assets/png/blog-6.png" alt="" />
        </div>
        <div class="desBox">
          <div class="desr">
            <div class="dest">{{ item.title }}</div>
            <div class="des_des">{{ item.time }}</div>
          </div>
          <img class="topage" src="@/assets/svg/topage3.svg" alt="" />
        </div>
      </div>
    </div>
    <!-- 第五屏 -->
    <div class="con5">
      <Experience></Experience>
    </div>
  </div>
</template>

<script>
import Experience from '@/components/Experience/index.vue'
import { mockDetailData } from '@/utils/mock.js'

export default {
  name: 'pcHome',
  components: {
    Experience
  },
  data() {
    return {
      mockDetailData
    }
  },

  mounted() {},
  methods: {
    goToUrl(url) {
      this.$router.push(url)
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('./index.less');
</style>
